<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    canvas {
      background-color: #eeeeee;
      width: 500px;
      height: 500px;
    }
  </style>
</head>

<body>
  <canvas id='canvas' width='800' height='800'>
    您的浏览器不支持canvas
  </canvas>
</body>

</html>
<script>
  let canvas = document.getElementById('canvas');
  let ctx = canvas.getContext('2d');
  let x = canvas.width / 2,
    y = canvas.height / 2;
    

  function draw() {
    ctx.translate(x+0.5, y+0.5); // 把画布的坐标原点 移动到 x,y的位置
    ctx.save();
    // 画一个圆盘
    ctx.beginPath();
    ctx.arc(0, 0, 200, 0, Math.PI * 2);
    ctx.strokeStyle = 'blue';
    ctx.lineWidth = 5;
    ctx.stroke();

    // 绘制小时的数字
    ctx.restore()
    let hourNum = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
    ctx.font = '20px Arial';
    ctx.textAlign = 'center'; // 文字居中对齐
    ctx.textBaseline = 'middle'; // 让文字上下居中
    hourNum.forEach((item, index) => {
      let rad = Math.PI * 2 / 12 * index; // 获取到每一个文字的弧度
      let x = Math.cos(rad) * 160,
        y = Math.sin(rad) * 160;
      ctx.strokeText(item, x, y)
    })

    //绘制分钟和小时 对应的点
    for (let i = 0; i < 60; i++) {
      ctx.beginPath();
      let rad = Math.PI * 2 / 60 * i;
      let x = Math.cos(rad) * 180,
        y = Math.sin(rad) * 180;
      if (i % 5 == 0) {
        /// 说明这是一个小时对应的点
        ctx.fillStyle = 'blue';
        ctx.arc(x, y, 5, 0, Math.PI * 2);
      } else {
        ctx.fillStyle = '#000';
        ctx.arc(x, y, 3, 0, Math.PI * 2);
      }
      ctx.fill();
    }
  }

  function drawHour(h, m) {
    // 绘制时针
    ctx.save();
    ctx.beginPath();
    ctx.lineWidth = 3;
    let rad = Math.PI * 2 / 12 * (h + m / 60)
    ctx.rotate(rad)
    ctx.moveTo(0, 20);
    ctx.lineTo(0, -100);
    ctx.stroke();
    ctx.restore();
  }

  function drawMinute(m) {
    // 绘制时针
    ctx.save();
    ctx.beginPath();
    let rad = Math.PI * 2 / 60 * m;
    ctx.rotate(rad)
    ctx.lineWidth = 2;
    ctx.moveTo(0, 20);
    ctx.lineTo(0, -120);
    ctx.stroke();
    ctx.restore();
  }

  function drawSecond(s) {
    // 绘制时针
    ctx.save();
    ctx.beginPath();
    let rad = Math.PI * 2 / 60 * s;
    ctx.rotate(rad)
    ctx.lineWidth = 1;
    ctx.moveTo(0, 20);
    ctx.lineTo(0, -140);
    ctx.stroke();
    ctx.restore();
  }

  function drawDot() {
    ctx.save();
    ctx.beginPath();
    ctx.arc(0, 0, 8, 0, Math.PI * 2);
    ctx.fillStyle = 'yellow';
    ctx.fill();
    ctx.restore()
  }

  let timer = setInterval(() => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.save();
    let date = new Date();
    let h = date.getHours(),
      m = date.getMinutes(),
      s = date.getSeconds();
    draw()
    
    drawHour(h,m)
    drawMinute(m)
    drawSecond(s)
    drawDot()
    ctx.restore();
  }, 1000);
  
  drawDot()
</script>